<script setup lang="ts">

import LeaveMessage from "@/views/homePage/components/LeaveMessage.vue";
import HeaderArea from "@/components/search/HeaderArea.vue";
import {useRoute} from "vue-router";
import {getRandomDetail} from "@/api/home";
import {ref} from "vue";

const route=useRoute()
let detailPic = ref()
let detailIntro = ref()
let detailTitle = ref()

console.log(route.query.publicizeId)

getRandomDetail(route.query.publicizeId).then(res=> {
    // if (res.code==200) {
        console.log(res)
        detailPic.value = 'http://192.168.5.120:8199' +res.data.mainPic
        detailIntro.value = res.data.intro
        detailTitle.value = res.data.title
        // console.log(detailIntro.value)
    // }

})

</script>

<template>
    <header-area>{{detailTitle}}</header-area>
  <div class="characterDetails">
      <div class="character">
          <div class="characterImg">
              <img :src="detailPic" alt="">
          </div>
          <div class="characterName">
              {{detailTitle}}
          </div>
      </div>
      <div class="details">
          {{detailIntro}}
      </div>
      <router-link to="./message">
          <LeaveMessage style="position: fixed;bottom: 0"/>
      </router-link>


  </div>


</template>

<style scoped>
.characterDetails {
    overflow: hidden;
    min-height: 667px;
    width: 375px;
    background-color: #fff;
    .character {
        width: 164.5px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        .characterImg {
            //width: 360px;
            height: 222px;
            margin:  auto;
            >img {
                width: 100%;
                height: 100%;
            }
        }
        .characterName {
            margin: 0 auto 30px;
            font-size: 19px;
        }
    }
    .details {
        margin: 10px 10px 70px 10px;
        font-size: 16px;
        color: #000000;
        //font-weight: 500;
    }


}
</style>